<template>
  <div v-if="!!data && isCondition(data)" class="col-box">
    <div class="center-line"></div>
    <div class="top-cover-line"></div>
    <div class="bottom-cover-line"></div>
    <div class="node-wrap">
      <div :class="`node-wrap-box ${data.type} ${showErrorTip? 'error' : ''}`">
        <el-tooltip content="未设置条件" placement="top" effect="dark">
          <div class="error-tip" @click="handleEdit(data)">!!!</div>
        </el-tooltip>
        <div class="card-container">
          <component :prevData="prevData" :is="getNodeComponent()" :conf="data" :eventLancher="eventLancher"/>
          <ActionDelete @delete="handleDelete(data,prevData)"/>
        </div>
        <AddNodeButton :data="data" :eventLancher="eventLancher"/>
      </div>
    </div>
    <div v-if="hasBranch(data)" class="branch-wrap">
      <div class="branch-box-wrap">
        <div class="branch-box flex justify-center relative">
          <button class="btn" @click="handleAppendConditionNode(data)">添加条件</button>
          <template v-for="d in data.conditionNodes" :key="d.id">
            <NodeFactory :data="d" :prevData="data" :verifyMode="verifyMode" :eventLancher="eventLancher"/>
          </template>
        </div>
      </div>
      <AddNodeButton :data="data" :isBranch="true" :eventLancher="eventLancher"/>
    </div>
    <NodeFactory :data="data.childNode" :prevData="data" :verifyMode="verifyMode" :eventLancher="eventLancher"/>
  </div>
  <template v-else-if="!!data && !isCondition(data) ">
    <!--    <div class="node-wrap" v-if="data.type!='empty'">-->
    <div class="node-wrap">
      <div :class="`node-wrap-box ${data.type} ${showErrorTip? 'error' : ''}`">
        <el-tooltip content="未设置条件" placement="top" effect="dark">
          <div class="error-tip" @click="handleEdit(data)">!!!</div>
        </el-tooltip>
        <div class="card-container">
          <component :is="getNodeComponent()" :prevData="prevData" :conf="data" :eventLancher="eventLancher"/>
          <ActionDelete @delete="handleDelete(data,prevData)"/>
        </div>
        <AddNodeButton :data="data" :eventLancher="eventLancher"/>
      </div>
    </div>
    <div v-if="hasBranch(data)" class="branch-wrap">
      <div class="branch-box-wrap">
        <div class="branch-box flex justify-center relative">
          <button class="btn" @click="handleAppendConditionNode(data)">添加条件</button>
          <template v-for="d in data.conditionNodes" :key="d.id">
            <NodeFactory :prevData="data" :data="d" :verifyMode="verifyMode" :eventLancher="eventLancher"/>
          </template>
        </div>
      </div>
      <AddNodeButton :data="data" :isBranch="true" :eventLancher="eventLancher"/>
    </div>
    <NodeFactory v-if="data.childNode &&!isCondition(data)" :prevData="data" :data="data.childNode"
                 :verifyMode="verifyMode"
                 :eventLancher="eventLancher"/>
  </template>
</template>
<script setup>
import {
  defineProps,
  defineEmits,
  computed
} from 'vue';
import {
  NodeUtils,
  isCondition,
  hasBranch
} from './util.js';
import NormalCard from './NormalCard.vue';
import ConditionCard from './ConditionCard.vue';
import AddNodeButton from './AddNodeButton.vue';
import NodeFactory from './NodeFactory.vue';
import {ElIcon} from "element-plus";
import {Close} from "@element-plus/icons-vue";
import ActionDelete from "@/views/flow/createDirectly/Process/FlowCard/ActionDelete.vue";
const props = defineProps({
  data: {
    type: Object,
    default: () => undefined
  },
  prevData: {
    type: Object,
    default: () => undefined
  },
  verifyMode: {
    type: Boolean,
    default: true
  },
  eventLancher: {
    type: Function
  }
});
const emits = defineEmits(['edit',
  'deleteNode',
  'increasePriority',
  'decreasePriority',
  'addApprovalNode',
  'addCopyNode',
  'appendBranch',
  'appendConditionNode']);
const showErrorTip = computed(() => {
  return props.verifyMode && NodeUtils.checkNode(props.data) === false;
});
const getNodeComponent = () => {
  if (props.data.type === 'condition') {
    return ConditionCard;
  }
  return NormalCard;
};
const handleEdit = (data) => {
  props.eventLancher('edit',
      data);
};
const handleAppendConditionNode = (data) => {
  props.eventLancher('appendConditionNode',
      data);
};
const handleDelete = (data,
                      prevData) => {
  props.eventLancher('deleteNode',
      data,
      prevData);
};
</script>
<style scoped lang="scss">
@import "@/assets/styles/variables.module";

$bg-color: #f5f5f7;
$line-color: #CACACA;
$base-size: 12px;
// Mixin flex 垂直居中布局
@mixin flex-center {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

// 三点省略 支持单行多行
// Mixin { n:Number } n：省略行数限制
@mixin ellipsis($n) {
  overflow: hidden;
  text-overflow: ellipsis;
  @if $n > 1 {
    display: -webkit-box;
    -webkit-line-clamp: $n;
    -webkit-box-orient: vertical;
  } @else {
    white-space: nowrap;
  }
}

.node-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: relative;

  .node-wrap-box {
    position: relative;
    @include flex-center;
    flex-direction: column;

    .card-container {
      position: relative;


    }

    &.condition {
      padding: 30px 50px 0;
    }

    &.approver::before {
      content: '';
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 4px;
      border-style: solid;
      border-width: 8px 6px 4px;
      border-color: $line-color transparent transparent;
      background: $bg-color;
    }

    &.error {
      &.condition {
        .error-tip {
          right: 0;
        }
      }

      .error-tip {
        right: -40px;
      }

      .flow-path-card {
        border: 1px solid #f00;

        &:hover {
          border-width: 0;
        }
      }
    }

    .error-tip {
      position: absolute;
      right: 0;
      top: 15%;
      width: 30px;
      height: 30px;
      color: #f00;
      cursor: pointer;
      border-radius: 50%;
      border: 1px solid;
      line-height: 30px;
      transition: right .5s;
    }

    &.condition {
      .error-tip {
        right: 60px;
      }
    }
  }
}

.end-node {
  font-size: $base-size;
  text-align: center;
  @include flex-center;
  flex-direction: column;

  &::before {
    content: "";
    width: 10px;
    height: 10px;
    margin: auto;
    border: none;
    margin-bottom: 12px;
    border-radius: 50%;
    background: #dbdcdc;
  }
}

:deep(.flow-path-card) {
  width: 220px;
  min-height: 82px;
  font-size: $base-size;
  border-radius: 4px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
  background: #FFF;

  .iconshenpi {
    margin-right: 4px;
    position: relative;
    top: 1px;
  }

  &:hover {
    box-shadow: 0 0 0 2px $yellow-7, 0 0 5px 4px rgba(0, 0, 0, 0.2);
  }

  &.copy {
    &:hover {
      box-shadow: 0 0 0 2px $copyCard, 0 0 5px 4px rgba(0, 0, 0, 0.2);
    }

    .header {
      background-color: $copyCard;
      color: $gray-9;
    }
  }

  &.condition {
    &:hover {
      box-shadow: 0 0 0 2px $conditionCard, 0 0 5px 4px rgba(0, 0, 0, 0.2);
    }

    .header {
      background-color: $conditionCard;
    }
  }

  &.approver {
    &:hover {
      box-shadow: 0 0 0 2px $approverCard, 0 0 5px 4px rgba(0, 0, 0, 0.2);
    }

    .header {
      background-color: $approverCard;
    }
  }

  &.empty {
    &:hover {
      box-shadow: 0 0 0 2px $emptyCard, 0 0 5px 4px rgba(0, 0, 0, 0.2);
    }

    .header {
      background-color: $emptyCard;
      color: $gray-9;
    }
  }

  &.start-node {
    &:hover {
      box-shadow: 0 0 0 2px $startCard, 0 0 5px 4px rgba(0, 0, 0, 0.2);
    }

    .header {
      background-color: $startCard;
    }
  }

  .header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 24px;
    padding: 0 6px;
    color: white;
    position: relative;
    box-sizing: border-box;

    .iconfont {
      width: 1em;
      height: 1em;
      margin-right: 6px;
    }

    .title-box {
      position: relative;
      @include ellipsis(1);
      flex: 1 1 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
    }

    .title-input {
      position: absolute;
      left: 0;
      z-index: 3;
      background: inherit;
      color: inherit;
      opacity: 0;

      &:focus {
        border-radius: 3px;
        font-size: $base-size;
        padding: 2px;
        padding-left: 4px;
        width: 80%;
        margin-left: 1px;
        height: 16px;
        box-sizing: border-box;
        background-color: $bg-color;
        color: black;
        opacity: 1;
      }
    }

    .title-text {
    }
  }

  &:not(.start-node):hover {
    .title-text {
      border-bottom: 1px dashed currentColor;
    }
  }

  .body {
    position: relative;
    padding: 12px;
    padding-right: 30px;
    box-sizing: border-box;

    .text {
      margin: 0;
      @include ellipsis(4);
    }
  }



  &.condition {
    .header {
      .title-text {
      }
    }

    .body {
      .text {
      }
    }

    .right-arrow, .left-arrow {
    }

    .priority {
      font-style: 12px;
      overflow: hidden;
      word-break: break-all;
      width: 80px;
    }
  }
}



.branch-wrap {
  .branch-box-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
  }

  .branch-box {
    align-items: stretch;
    border-bottom: 2px solid $line-color;
    border-top: 2px solid $line-color;
    box-sizing: border-box;
    background: $bg-color;

    > .col-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;

      &:first-of-type {
        &::before, &::after {
          content: "";
          position: absolute;
          left: 0;
          height: 3px;
          width: calc(50% - 1px);
          background: $bg-color;
        }

        &::before {
          top: -2px;
        }

        &::after {
          bottom: -2px;
        }
      }

      &:last-of-type {
        &::before, &::after {
          content: "";
          position: absolute;
          right: 0;
          height: 3px;
          width: calc(50% - 1px);
          background: $bg-color;
        }

        &::before {
          top: -2px;
        }

        &::after {
          bottom: -2px;
        }
      }

      .center-line {
        height: 100%;
        width: 2px;
        background: $line-color;
        position: absolute;
      }
    }

    > .btn {
      z-index: 99;
      cursor: pointer;
      position: absolute;
      top: 0;
      outline: none;
      transform: translateY(-50%);
      padding: 6px 10px;
      border: none;
      border-radius: 15px;
      background: white;
      box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.2);
      transition: transform .3s;

      &:hover {
        transform: scale(1.1) translateY(-50%);
      }
    }
  }
}


.relative {
  position: relative;
}

.flex {
  display: flex;
}

.justify-center {
  justify-content: center;
}

.icon {
  vertical-align: middle;
  width: 14px;
  height: 14px;
  font-size: 14px;
}
</style>
